<template>
  <div class="word-list">
    <word-item :wordList="wordList" />
  </div>
</template>

<script lang="ts" setup>
import { open } from '@/api/open'
import WordItem from '@/components/word/WordItem.vue'
import { Word } from '@/model/index'
import { defineProps, onMounted, ref } from 'vue'
const wordList = ref([] as Word[])
const props = defineProps({
  category: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

const getWordList = async (categoryId: number) => {
  const msg = await open.word.getCategoryList({ id: categoryId })
  if (msg.code === 0) {
    wordList.value = msg.data
  }
}

onMounted(() => {
  getWordList(props.category.categoryId)
})
</script>
<style lang="scss" scoped>
.word-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
</style>
